---
layout: demo
title: SUI Mobile Demo
---
<div class="page" id="page-index">
  <header class="bar bar-nav">
    <a class="icon icon-me pull-left open-panel" data-panel=".panel-left"></a>
    <a class="button button-link button-nav pull-right open-popup" data-popup=".popup-about">
      关于
      <span class="icon icon-menu"></span>
    </a>
    <h1 class="title">SUI Mobile</h1>
  </header>
  <div class="bar bar-standard bar-footer">
    <a class="icon icon-edit pull-left"></a>
    <a class="icon icon-settings pull-right open-panel" data-panel=".panel-right"></a>
  </div>
  <div class="content" id='page-index'>
    <div class="content-inner">
      <div class="content-block-title">示例</div>
      <div class="list-block">
        <ul>
          <li>
            <a href="/demos/bar" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">标题栏和工具栏</div>
              </div>
            </a>
          </li>
          <li>
            <a href="/demos/btns" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">按钮</div>
              </div>
            </a>
          </li>
          <li>
            <a href="/demos/form" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">表单</div>
              </div>
            </a>
          </li>
          <li>
            <a href="/demos/searchbar" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">搜索栏</div>
              </div>
            </a>
          </li>
          <li>
            <a href="/demos/list" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">列表</div>
              </div>
            </a>
          </li>
          <li>
            <a href="/demos/tabs" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">标签页</div>
              </div>
            </a>
          </li>
          <li>
            <a href="/demos/card" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">卡片</div>
              </div>
            </a>
          </li>
          <li>
            <a href="/demos/grid" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">栅格</div>
              </div>
            </a>
          </li>
          <li>
            <a href="/demos/modal" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">对话框</div>
              </div>
            </a>
          </li>
          <li>
            <a href="/demos/preloader" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">加载提示</div>
              </div>
            </a>
          </li>
          <li>
            <a href="/demos/actions" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">操作表</div>
              </div>
            </a>
          </li>
          <li>
            <a href="/demos/calendar" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">日历</div>
              </div>
            </a>
          </li>
          <li>
            <a href="/demos/picker" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">picker</div>
              </div>
            </a>
          </li>
          <li>
            <a href="/demos/datetime-picker" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">日期时间选择器</div>
              </div>
            </a>
          </li>
          <li>
            <a href="/demos/city-picker" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">省市区选择器</div>
              </div>
            </a>
          </li>
          <li>
            <a href="/demos/swiper" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">幻灯片</div>
              </div>
            </a>
          </li>
          <li>
            <a href="/demos/photo-browser" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">图片浏览器</div>
              </div>
            </a>
          </li>
          <li>
            <a href="/demos/pull-to-refresh" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">下拉刷新</div>
              </div>
            </a>
          </li>
          <li>
            <a href="/demos/infinite-scroll" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">无限滚动</div>
              </div>
            </a>
          </li>
          <li>
            <a href="/demos/routers/" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">路由器</div>
              </div>
            </a>
          </li>
          <li>
            <a href="/demos/icons" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">图标</div>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
<div class="popup popup-about">
  <header class="bar bar-nav">
    <a class="button button-link button-nav pull-right close-popup">
      关闭
    </a>
    <h1 class="title">关于SUI Mobile</h1>
  </header>
  <div class="content">
    <div class="content-inner">
      <div class="content-block">
        <p>SUI Mobile 是阿里巴巴共享业务事业部SDC团队（UED）提供的一套手机UI库。</p>
        <p>我们的目的是为手机千牛、百川以及任何手机端的H5页面提供标准的设计规范和前端实现。</p>
        <p>SUI Mobile并没有重新发明轮子，我们主要参考了 <a href='http://goratchet.com' external target='_blank'>ratchet</a> 和 <a href='http://framework7.taobao.org/' external target='_blank'>Framework7</a></p>
        <p>这里只是一个官方示例，详细文档请参考：<a href='http://m.sui.taobao.org/' external target='_blank'>http://m.sui.taobao.org/</a></p>
        <p></p>
        <p><a class="button close-popup">确定</a></p>
      </div>
    </div>
  </div>
</div>

<div class="panel-overlay"></div>
<!-- Left Panel with Reveal effect -->
<div class="panel panel-left panel-reveal">
  <div class="content-block">
    <p>这是一个侧栏</p>
    <p></p>
    <!-- Click on link with "close-panel" class will close panel -->
    <p><a href="#" class="close-panel">关闭</a></p>
  </div>
</div>
<div class="panel panel-right panel-cover">
  <div class="content-block">
    <p>这是右侧栏，panel-cover模式</p>
    <p></p>
    <!-- Click on link with "close-panel" class will close panel -->
    <p><a href="#" class="close-panel">关闭</a></p>
  </div>
</div>

